<template>
  <div>
      <!-- :load-options="loadOptions" -->
    <treeselect
      v-model="value"
      :options="dataList"
      :normalizer="normalizer"
      :placeholder="orgName"
      @select="changeOrgId"
      :clearable="clearable"
      noChildrenText="加载中..."
      noOptionsText="暂无组织机构"
      noResultsText="无匹配数据"
      :appendToBody="true"
      z-index="9000"
      :searchable="searchable"
      :disabled="disabled"
        class="custom-treeselect"
    />
  </div>
</template>

<script>
import { reqOrgList, reqOrgLevel ,reqAgencyList} from "@/api/api";
import { handleTree ,transTree} from "@utils/trans-tree";
import treeselect from "@riophae/vue-treeselect";
import { LOAD_CHILDREN_OPTIONS } from "@riophae/vue-treeselect";
// import "@components/vue-treeselect.less";
import "@components/vue-treeselect.less";
import { mapState } from "vuex";

export default {
  props: {
    disabled:{
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
    searchable: {
      type: Boolean,
      default: false,
    },
    orgName: {
      type: String,
      default: "请选择组织机构",
    },
  },
  components: {
    treeselect,
  },
  data() {
    return {
      normalizer(node) {
        return {
          id: node.id,
          label: node.orgName,
          children: node.children,
        };
      },
      value: null,
      dataList: [],
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getvalue(parentId){
      this.value=parentId
    },
    resetFields() {
      this.value = null;
    },
    // 获取组织机构列表
    async getDataList() {
      var res = await reqOrgList({
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        orgName: "",
        type:"1,2,3"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows } = res.data;
      this.dataList = transTree(rows);//返回全部数据
      // this.dataList = handleTree(rows);
      // this.dataList.forEach((item, index) => {
      //   if (item.hasChildren == 1) {
      //     item.children = null;
      //   } else {
      //     item.children = false;
      //   }
      // });
    },
     // 选择一条
     changeOrgId(instanceId) {
      this.$emit("changeOrgId", instanceId);
    },
    // 树懒加载
    loadOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        reqOrgList({
          userId: this.user.userId,
          roleName: this.user.roleName,
          tenantId: this.user.tenantId,
          orgName: "",
           type:"1,2,3",
          parentId: parentNode.id,
        }).then((res) => {
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          let arr = [];
          for (let index of res.data.rows) {
            let chiledModeInfo = {};
            chiledModeInfo.address = index.address;
            chiledModeInfo.area = index.area;
            chiledModeInfo.city = index.city;
            chiledModeInfo.createTime = index.createTime;
            chiledModeInfo.hasChildren = index.hasChildren;
            chiledModeInfo.id = index.id;
            chiledModeInfo.children = null;
            chiledModeInfo.level = index.level;
            chiledModeInfo.orderNum = index.orderNum;
            chiledModeInfo.orgName = index.orgName;
            chiledModeInfo.parentId = index.parentId;
            chiledModeInfo.province = index.province;
            chiledModeInfo.status = index.status;
            chiledModeInfo.tenantId = index.tenantId;
            chiledModeInfo.updateTime = index.updateTime;
            chiledModeInfo.type = index.type;
            if (index.hasChildren != 1) {
              delete chiledModeInfo.children; //为末级的时候删掉children，就不会出现末级也有小箭头可以点
            }
            arr.push(chiledModeInfo);
          }
          parentNode.children = arr;
        });
        callback();
      }
    },
   
  },
};
</script>

<style scoped lang="less">
::v-deep .vue-treeselect__control {
  height: 32px;
  border: 1px solid @primaryBorder;
  box-sizing: border-box;
  color: @primaryContentTxt !important;
  background: @primaryHeaderBgcolor;
}

::v-deep .vue-treeselect__single-value {
  color: @primaryContentTxt !important;
}

/* 覆盖 treeselect 下拉框的字体颜色 */
//  ::v-deep  .treeselect__menu .treeselect__menu-item {
//             color: red !important;
//         }

::v-deep .vue-treeselect__menu .vue-treeselect__option {
  color: #606266;
  /* 设置选项的字体颜色为蓝色 */
}

::v-deep .vue-treeselect__placeholder {
  color: @primaryThemeTxtColor;
  /* 设置占位符的字体颜色为灰色 */
}

::v-deep .vue-treeselect__control:hover {
  border: 1px solid @primaryBorder !important;
  /* 设置鼠标移入时的背景色为浅灰色 */
}

/* placeholder字体颜色 */
::v-deep .vue-treeselect__placeholder {
  color: @primaryTxtcolor2;
}

// 小箭头
::v-deep .vue-treeselect__control-arrow-container {
  display: none;
}
::v-deep .custom-treeselect .vue-treeselect__placeholder {
  color: @primaryThemeTxtColor3 !important; 
  font-size: 13px !important;
}
</style>
